<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <j-dialog
      title="查询"
      isMask
      style="width:70%"
      :visible.sync="crud.props.searchToggle"
    >
    <el-form size="small" label-width="70px">
      <el-row :gutter="10">
        <el-col :xs="24" :sm="12" :md="8" :lg="9" :xl="9">
          <el-form-item label="业务日期">
            <div class="flex flex-row">
              <el-date-picker
                v-model="query.startBusDate"
                align="right"
                unlink-panels
                class="fl1"
                format="yyyy - MM - dd "
                value-format="yyyy-MM-dd"
                default-value
                range-separator=""
                placeholder="开始日期"
              />
              <el-date-picker
                v-model="query.endBusDate"
                align="right"
                unlink-panels
                class="fl1"
                format="yyyy - MM - dd "
                value-format="yyyy-MM-dd"
                default-value
                range-separator=""
                placeholder="结束日期"
              />
            </div>
          </el-form-item>
        </el-col>
        <!--        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">-->
        <!--          <el-form-item label="验收日期">-->
        <!--            <div class="flex flex-row">-->
        <!--              <el-date-picker-->
        <!--                v-model="query.startAcceptDate"-->
        <!--                align="right"-->
        <!--                unlink-panels-->
        <!--                class="fl1"-->
        <!--                format="yyyy - MM - dd "-->
        <!--                value-format="yyyy-MM-dd"-->
        <!--                default-value-->
        <!--                range-separator=""-->
        <!--                placeholder="开始日期"-->
        <!--              />-->
        <!--              <el-date-picker-->
        <!--                v-model="query.endAcceptDate"-->
        <!--                align="right"-->
        <!--                unlink-panels-->
        <!--                class="fl1"-->
        <!--                format="yyyy - MM - dd "-->
        <!--                value-format="yyyy-MM-dd"-->
        <!--                default-value-->
        <!--                range-separator=""-->
        <!--                placeholder="结束日期"-->
        <!--              />-->
        <!--            </div>-->
        <!--          </el-form-item>-->
        <!--        </el-col>-->
        <el-col :xs="24" :sm="12" :md="8" :lg="9" :xl="9">
          <el-form-item label="审核日期">
            <div class="flex flex-row">
              <el-date-picker
                v-model="query.auditStartTime"
                align="right"
                unlink-panels
                class="fl1"
                format="yyyy - MM - dd "
                value-format="yyyy-MM-dd"
                default-value
                range-separator=""
                placeholder="开始日期"
              />
              <el-date-picker
                v-model="query.auditEndTime"
                align="right"
                unlink-panels
                class="fl1"
                format="yyyy - MM - dd "
                value-format="yyyy-MM-dd"
                default-value
                range-separator=""
                placeholder="结束日期"
              />
            </div>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
          <el-form-item label="客户">
            <table-select
              :tableColumns="
                  [
                  {prop:'code',label:'客户编码',width: '100'},
                  {prop:'name',label:'客户名称',width: '150'},
                  {prop:'address',label:'地址'},
                  {prop:'sCustomerName',label:'二批'},
                  ]"
              labelKey="name"
              valueKey="id"
              width="700"
              :value.sync="query.customerIds"
              placeholder="请选择客户"
              url="api/dropDown/basCustomerList"
            ></table-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :xs="24" :sm="8" :md="6" :lg="6" :xl="6">
          <el-form-item label="部门">
            <treeselect
              v-model="query.deptIds"
              :options="deptList"
              placeholder="部门"
              style="width: 100%"
              :normalizer="normalizer"
              multiple
              @input="val=>getNoStr(val,'deptList','deptIds')"
            />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
          <el-form-item label="销售区域">
            <treeselect
              v-model="customerAreaIds"
              :options="areaData"
              placeholder="销售区域"
              style="width: 100%"
              :normalizer="normalizer"
              multiple
              @input="val=>getNoStr(val,'areaData','customerAreaIds')"
            />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
          <el-form-item label="司机">
            <table-select
              :tableColumns="
                  [
                  {prop:'name',label:'司机名称'},
                  ]
              "
              labelKey="name"
              valueKey="id"
              width="400"
              :params="{businessAttr:'5'}"
              :value.sync="query.driverIds"
              placeholder="请选择司机"
              url="/api/dropDown/sysUserList"
            ></table-select>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
          <el-form-item label="客户分类">
            <treeselect
              v-model="customerTypeIds"
              :options="customerTypeList"
              placeholder="客户分类"
              style="width: 100%"
              :normalizer="normalizer"
              multiple
              @input="val=>getNoStr(val,'customerTypeList','customerTypeIds')"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
          <el-form-item label="商品">
            <table-select
              :tableColumns="[{prop:'goodsCode',label:'商品编码'},{prop:'goodsName',label:'商品名称'}]"
              labelKey="goodsName"
              valueKey="goodsId"
              :value.sync="query.goodsIds"
              placeholder="请选择商品"
              url="/api/dropDown/basGoodsListForAdd"
            ></table-select>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
          <el-form-item label="品牌">
            <table-select
              :tableColumns="[{prop:'code',label:'品牌编码',width:'100'},{prop:'name',label:'品牌名称',width: '280'}]"
              :value.sync="query.goodsBrandIds"
              placeholder="请选择品牌"
              url="/api/dropDown/basGoodsBrandList"
            ></table-select>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="小计列">
            <el-checkbox-group style="width:200px"
                               v-model="groupColumn" @change="getChange" class="flex flex-row ">
              <el-checkbox v-for="item in groupColumnList"
                           :disabled="item.value ==''"
                           :label="item.value" :key="item.value"
                           :value="item.value">{{ item.label }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
          <el-button class="filter-item" size="mini" type="primary" @click="toQuery">搜索</el-button>
          <el-button class="filter-item" plain size="mini" type="primary"
                     @click="resetQuery">重置
          </el-button>
        </el-col>
      </el-row>
    </el-form>
  </j-dialog>
  <!--表单组件-->
      <crudOperation :permission="permission" />
      <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="500px">
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
          <el-form-item label="id">
            <el-input v-model="form.id" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="司机id">
            <el-input v-model="form.userId" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="司机编码">
            <el-input v-model="form.userCode" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="司机姓名">
            <el-input v-model="form.userName" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="客户id">
            <el-input v-model="form.customerId" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="客户名称">
            <el-input v-model="form.customerName" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="客户编码">
            <el-input v-model="form.customerCode" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="二批id">
            <el-input v-model="form.sCustomerId" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="二批编码">
            <el-input v-model="form.sCustomerCode" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="二批姓名">
            <el-input v-model="form.sCustomerName" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="客户分类id">
            <el-input v-model="form.customerTypeId" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="客户分类名称">
            <el-input v-model="form.customerTypeName" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="客户分类编码">
            <el-input v-model="form.customerTypeCode" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="条形码">
            <el-input v-model="form.barcode" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="商品id">
            <el-input v-model="form.goodsId" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="商品名称">
            <el-input v-model="form.goodsName" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="商品编码">
            <el-input v-model="form.goodsCode" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="品牌id">
            <el-input v-model="form.goodsBrandId" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="品牌编码">
            <el-input v-model="form.goodsBrandCode" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="品牌名称">
            <el-input v-model="form.goodsBrandName" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="发货箱数">
            <el-input v-model="form.loadBoxCount" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="退货箱数">
            <el-input v-model="form.salesReturnBoxCount" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="回箱箱数">
            <el-input v-model="form.returnBottleBoxCount" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="回箱率">
            <el-input v-model="form.returnBoxRate" style="width: 370px;" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table ref="table"
                show-summary
                :summary-method="sumRow"
                height="700"
                stripe
                border
                :data="crud.data"
                size="small"
                style="width: 100%;"
                @selection-change="crud.selectionChangeHandler">
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" width="55" label="序号"/>
        <el-table-column v-if="groupColumn.includes('userId')" prop="userCode" label="司机编码" />
        <el-table-column v-if="groupColumn.includes('userId')" prop="userName" label="司机姓名" />
        <el-table-column v-if="groupColumn.includes('customerId')" prop="customerName" label="客户名称" />
        <el-table-column v-if="groupColumn.includes('customerId')" prop="customerCode" label="客户编码" />
        <el-table-column v-if="groupColumn.includes('deptId')" prop="deptName" label="部门名称" />
        <el-table-column v-if="groupColumn.includes('sCustomerId')" prop="sCustomerCode" label="二批编码" />
        <el-table-column v-if="groupColumn.includes('sCustomerId')" prop="sCustomerName" label="二批姓名" />
        <el-table-column v-if="groupColumn.includes('customerTypeId')" prop="customerTypeName" label="客户分类名称" />
        <el-table-column v-if="groupColumn.includes('customerTypeId')" prop="customerTypeCode" label="客户分类编码" />
        <el-table-column v-if="groupColumn.includes('goodsId')" prop="barcode" label="条形码" />
        <el-table-column v-if="groupColumn.includes('goodsId')" prop="goodsName" label="商品名称" />
        <el-table-column v-if="groupColumn.includes('goodsId')" prop="goodsCode" label="商品编码" />
        <el-table-column v-if="groupColumn.includes('goodsBrandId')" prop="goodsBrandCode" label="品牌编码" />
        <el-table-column v-if="groupColumn.includes('goodsBrandId')" prop="goodsBrandName" label="品牌名称" />
        <el-table-column v-if="columns.visible('loadBoxCount')" prop="loadBoxCount" label="发货箱数" />
        <el-table-column v-if="columns.visible('salesReturnBoxCount')" prop="salesReturnBoxCount" label="退货箱数" />
        <el-table-column v-if="columns.visible('returnBottleBoxCount')" prop="returnBottleBoxCount" label="回箱箱数" />
        <el-table-column v-if="columns.visible('returnBoxRate')" prop="returnBoxRate" label="回箱率" />
<!--        <el-table-column v-permission="['admin','reportDriverSend:edit','reportDriverSend:del']" label="操作" width="150px" align="center">-->
<!--          <template slot-scope="scope">-->
<!--            <udOperation-->
<!--              :data="scope.row"-->
<!--              :permission="permission"-->
<!--            />-->
<!--          </template>-->
<!--        </el-table-column>-->
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
import crudReportDriverSend from '@/api/erp/reportDriverSend'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import JDialog from '../../../components/jDialog/jDialog'
import {getAreaTree} from "@/api/erp/basCustomerArea";
import Treeselect from '@riophae/vue-treeselect'
import { getCustomerTypeTree } from '@/api/erp/basCustomerType'
import {getDepts} from "../../../api/system/dept";

// crud交由presenter持有
const defaultCrud = CRUD({ title: '司机发货报表',
  optShow: {
    add: false,
    edit: false,
    del: false,
    download: true,
    leadingIn: false,
    enable: false,
    disable: false,
    pass: false,
    reject: false,
    invalid: false,
    recover: false,
    downloadDetail: false,
    print: false,
    printDetail: false,
  },
  query:{
    groupColumns:'userId',
  },
  deptList:[],
  queryOnPresenterCreated:false,
  url: 'api/reportDriverSend', sort: '',
  crudMethod: { ...crudReportDriverSend }})
const defaultForm = {
  id: null,
  userId: null,
  userCode: null,
  userName: null,
  customerId: null,
  customerName: null,
  customerCode: null,
  sCustomerId: null,
  sCustomerCode: null,
  sCustomerName: null,
  customerTypeId: null,
  customerTypeName: null,
  customerTypeCode: null,
  barcode: null,
  goodsId: null,
  goodsName: null,
  goodsCode: null,
  goodsBrandId: null,
  goodsBrandCode: null,
  goodsBrandName: null,
  loadBoxCount: null,
  salesReturnBoxCount: null,
  returnBottleBoxCount: null,
  returnBoxRate: null
}
export default {
  name: 'ReportDriverSend',
  components: { JDialog, pagination, crudOperation, rrOperation, udOperation, Treeselect },
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  data() {
    return {
      permission: {
        add: ['admin', 'reportDriverSend:add'],
        edit: ['admin', 'reportDriverSend:edit'],
        del: ['admin', 'reportDriverSend:del'],
        import: ['admin', 'reportDriverSend:import'],
        export: ['admin', 'reportDriverSend:export'],
        copy: ['admin', 'reportDriverSend:copy'],
        upload: ['admin', 'reportDriverSend:upload'],
        download: ['admin', 'reportDriverSend:download'],
      },
      dialogShow: false,
      areaData:[],
      customerTypeList: [],
      customerAreaIds:[],
      customerTypeIds: [],
      groupColumn: [],
      groupColumnList: [{
        label: '配送员',
        value: 'userId',
      },{
        label: '客户',
        value: 'customerId'
      },{
        label: '商品',
        value: 'goodsId'
      },{
        label: '品牌',
        value: 'goodsBrandId'
      },{
        label: '二批',
        value: 'sCustomerId'
      },{
        label: '客户分类',
        value: 'customerTypeId'
      },{
        label: '部门',
        value: 'deptId'
      },
      ],
      rules: {
      }    }
  },
  watch: {
  },
  updated() {
    this.$nextTick(() => {
      this.$refs.table.doLayout()
    })
  },
  created() {
    this.getAreaTree()
    getCustomerTypeTree({size:999}).then(res=>{
      this.customerTypeList = res
    })
    this.groupColumnSelectList = ['userId']
    this.$set(this.query,'groupColumns','userId')
    this.groupColumn= ['userId']
    getDepts({status: 1}).then(res => {
      this.deptList = res
    })
  },
  methods: {
    getAreaTree() {
      getAreaTree({status: 1}).then(res => {
        console.log(res)
        this.areaData = res
      })
    },
    getNoStr(val,type,prop){
      let str = ''
      val.forEach(item=>{
        const itemNode = this.getTreeName(this[type],item)
        str = this.getNode(itemNode,str)
      })
      this.query[prop] = str
    },
    getTreeName(treeList,id){
      let _this=this
      for (let i = 0; i < treeList.length; i++) {
        let treeItem=treeList[i]
        if(treeItem.id===id){
          return treeItem
        }else{
          if(treeItem.children && treeItem.children.length>0){
            let res=_this.getTreeName(treeItem.children,id)
            if(res){
              return res
            }
          }
        }
      }
    },
    getNode(node,str){
      if (node.children){
        for (let i =0;i<node.children.length;i++){
          str = this.getNode(node.children[i],str)
        }
      }
      return str+=node.id+ ','
    },
    getChange(val){
      this.groupColumnSelectList = val
    },
    normalizer(node) {
      //去掉children=[]的children属性
      if (node.children == null || node.children.length == 0) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children
      }
    },
    toQuery(){
      this.query.groupColumns = this.groupColumnSelectList.join(',') || ''
      this.crud.props.searchToggle = false
      this.crud.toQuery()
    },
    getSelectSum(type){
      let i  = 0
      this.crud.selections.forEach(item=>{
        i+=item[type]
      })
      return i
    },
    sumRow({columns, data}) {
      const sums = []
      for (let i in columns) {
        const prop = this.crud.summary[columns[i].property]
        if (prop){
          sums[i] = <p>{this.getSelectSum(columns[i].property)}<hr />{prop}</p>
        }else {
          sums[i] = ''
        }
      }
      sums[0] =
        <p>
        选中合计
        <hr />
        合计
      </p>
      return sums
    },
    resetQuery(){
      this.customerAreaIds = []
      this.customerTypeIds = []
      this.groupColumnSelectList = ['userId']
      this.$set(this.query,'groupColumns','userId')
      this.groupColumn= ['userId']
      // this.dialogShow = false
      this.crud.resetQuery()
    },
    // 获取数据前设置好接口地址
    [CRUD.HOOK.beforeRefresh]() {
      return true
    }, // 新增与编辑前做的操作
    [CRUD.HOOK.afterToCU](crud, form) {
    },

  }
}
</script>

<style scoped>
  .table-img {
    display: inline-block;
    text-align: center;
    background: #ccc;
    color: #fff;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    vertical-align: middle;
    width: 32px;
    height: 32px;
    line-height: 32px;
  }
</style>
